<!-- 商品统计 -->

<template>
  <div id="main" ref="chart">

  </div>
</template>

<script setup>
import * as echarts from 'echarts';
import { onMounted, ref,onBeforeUnmount } from 'vue';
const chart = ref(null);
let myChart = null;

const initChart = () => {
  //获取dom节点
  myChart = echarts.init(chart.value);
  //配置项
  var option = {
    //标题
    title: {
      text: '数据统计'
    },
    // 鼠标放上去显示数据
    tooltip: {
      trigger: 'axis'
    },
    //图例 数据展示分类
    legend: {
      data: ['热销榜', '新品展示', '炒饭系列', '千万销量', '营养适配', '满减专区', '冒菜', '海鲜自助', '小吃']
    },
    // 布局
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    // 可下载
    toolbox: {
      feature: {
        saveAsImage: {}
      }
    },
    //x轴 坐标数据
    xAxis: {
      type: 'category',
      boundaryGap: false,//x轴坐标轴两边留白策略
      data: ['2-17', '2-18', '2-19', '2-20', '2-21', '2-22', '2-23', '2-24']
    },
    yAxis: {
      type: 'value',
      data: [1000, 2000, 3000, 4000, 5000, 6000, 7000]
    },
    //数据
    series: [
      {
        name: '热销榜',//图例名称
        data: [120, 132, 101, 134, 90, 230, 210, 300, 400,],
        type: 'line'//类型：折线图
      },
      {
        name: '新品展示',
        data: [220, 182, 191, 234, 290, 330, 310, 400, 500],
        type: 'line'
      },
      {
        name: '炒饭系列',
        data: [150, 232, 201, 154, 190, 330, 410, 400, 500],
        type: 'line'
      },
      {
        name: '千万销量',
        data: [320, 332, 301, 334, 390, 330, 320, 400, 500],
        type: 'line'
      },
      {
        name: '营养适配',
        data: [820, 932, 901, 934, 1290, 1330, 1320, 1500, 2000],
        type: 'line'
      },
      {
        name: '满减专区',
        data: [120, 132, 101, 134, 90, 230, 210, 400, 500],
        type: 'line'
      },
      {
        name: '冒菜',
        data: [220, 182, 191, 234, 290, 330, 310, 400, 500],
        type: 'line'
      },
      {
        name: '海鲜自助',
        data: [150, 232, 201, 154, 190, 330, 410, 400, 500],
        type: 'line'
      },
      {
        name: '小吃',
        data: [320, 332, 301, 334, 390, 330, 320, 400, 500],
        type: 'line'
      },
    ]
  }
  //初始化echarts实例 生成图
  myChart.setOption(option);
}
onMounted(() => {
  initChart();
})

//实现echarts自适应
const onResize = ()=>{
  myChart.resize();
}
//监听窗口大小变化 window都事件在其它组件也会被触发 所有要通过销毁周期销毁
window.addEventListener('resize', onResize)
//销毁周期 消除事件监听
//在销毁的一瞬间执行
onBeforeUnmount(()=>{
  window.removeEventListener('resize', onResize)
})
</script>

<style lang="scss" scoped>
#main {
  width: 100%;
  height: 100%;
}
</style>
